import React, { Component } from 'react'
import { addAddress } from '../../actions/index'
import { connect } from 'react-redux'


class Edit extends Component {

    submit = () => {
        if (this.user.value && this.tel.value && this.address.value) {
            let options = {
                name: this.user.value,
                tel: this.tel.value,
                address: this.address.value,
                id: Date.now(),
                flag: false
            }
            this.props.add(options)
            this.props.history.goBack()
        } else {
            alert('请输入完整信息')
        }
    }

    render() {
        return (
            <div className="wrap edit-page">
                <div className="row">
                    <span>姓名</span>
                    <input type="text" ref={el => this.user = el} />
                </div>
                <div className="row">
                    <span>手机号</span>
                    <input type="tel" ref={el => this.tel = el} />
                </div>
                <div className="row">
                    <span>地址</span>
                    <input type="text" ref={el => this.address = el} />
                </div>
                <button onClick={this.submit}>完成</button>
            </div>
        )
    }
}


// 容期组件 处理和 store 的交互
let mapDispatchToProps = dispatch => {
    return {
        add(options){
            dispatch(addAddress(options))
        }
    }
}

export default connect(null, mapDispatchToProps)(Edit)